<script setup lang="ts">
import UvLine from '@/uv-ui/components/nv-line/uv-line.vue'

defineProps({
  title: {
    type: String,
    default: '请选择',
  },
  valueKey: {
    type: String,
    default: 'value',
  },
  labelKey: {
    type: String,
    default: 'name',
  },
  list: {
    type: Array,
    default: () => [],
  },
})
const emit = defineEmits(['change'])
const value = ref()
const show = ref(false)
function open(val?: string | number) {
  value.value = val
  show.value = true
}
function close() {
  show.value = false
}
function valueChange(res) {
  emit('change', res.value)
  show.value = false
}
defineExpose({ open, close })
</script>

<template>
  <wd-popup
    v-model="show"
    position="bottom"
    custom-style="border-radius:16rpx  16rpx 0  0;"
    @close="close"
  >
    <view>
      <view class="flex items-center justify-between px-4 pt-2">
        <wd-button type="text" />
        <wd-text :text="title" class="flex-1 text-center" color="#333" size="14" />
        <wd-button type="text" @tap="close">取消</wd-button>
      </view>
      <uv-line />
      <scroll-view scroll-y class="max-h-[70%] overflow-hidden" :show-scrollbar="false">
        <wd-radio-group v-model="value" shape="dot" cell @change="valueChange">
          <template v-for="item in list" :key="item[valueKey]">
            <wd-radio :value="item[valueKey]">
              <view class="flex flex-col items-start pr-4 text-left">
                <wd-text :text="item[labelKey]" size="14px" color="#333" />
                <wd-text v-if="item.desc" :text="item.desc" size="12px" class="mt-1" />
              </view>
            </wd-radio>
            <view class="pl-2">
              <uv-line color="#f0f0f0" />
            </view>
          </template>
        </wd-radio-group>
      </scroll-view>
      <slot />
      <AppSafeBottom />
    </view>
  </wd-popup>
</template>

<style scoped lang="scss"></style>
